<%@ page language="java" contentType="text/html; charset=utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>tab test</title>
<link rel="stylesheet" href="js/resources/css/ext-all.css"
	type="text/css"></link>
<link rel="stylesheet" href="css/main.css"
	type="text/css"></link>
<!-- 
<style type="text/css">
.list {
    padding-left: 16px;
    padding-bottom: 10px;
}
.list li{
    list-style: square;
    padding: 2px;
}

pre {
    font-size: 11px; 
}
</style>
 -->
<script type="text/javascript" src="js/ext-all-debug.js"></script>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
Ext.require('Ext.tab.*');

Ext.onReady(function(){

	var index=0;
	
    var btn = Ext.create('Ext.button.Button', {
        //iconCls: 'new-tab',
        renderTo: document.body,
        text: 'Add Closable Tab',
        handler: function () {
            addTab(true);
        }
    });
    
    function addTab (closable) {
        ++index;
        var newTab = tabs2.add({
            closable: !!closable,
            html: ' <iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="' + 'gridtest.jsp' + '"> </iframe>',
            iconCls: 'tab_icon',
            title: 'New Tab ' + index
        });
        newTab.show();
        //newTab.getEl().mask("aaa");
        //newTab.getEl().unmask();
    }
    
    
    // second tabs built from JS
    var tabs2 = Ext.create('Ext.tab.Panel', {
        renderTo: document.body,
        activeTab: 0,
        width: 800,
        height: 600,
        plain: true,
        defaults :{
            autoScroll: true,
            bodyPadding: 10
        },
        items: [{
                title: 'Normal Tab',
                html: "My content was added during construction."
            },{
                title: 'Ajax Tab 1',
                /*
                loader: {
                    url: 'gridtest.jsp',
                    autoLoad: true
                    //contentType: 'html',
                    //loadMask: true
                },
                */
                closable: true,
                html: ' <iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="' + 'gridtest.jsp' + '"> </iframe>'
                /*
                listeners: {
                    activate: function(tab) {
                        tab.loader.load();
                    }
                }
                */
            },{
                title: 'Ajax Tab 2',
                loader: {
                    url: 'jsontest.jsp',
                    contentType: 'html',
                    autoLoad: true,
                    params: 'foo=123&bar=abc'
                }
            },{
                title: 'Event Tab',
                listeners: {
                    activate: function(tab){
                        alert(tab.title + ' was activated.');
                    }
                },
                html: "I am tab 4's content. I also have an event listener attached."
            },{
                title: 'Disabled Tab',
                disabled: true,
                html: "Can't see me cause I'm disabled"
            }
        ]
    });
});
</script>
</head>
<body>

</body>
</html>